[Website] - Changes to the Landing Page & Team Page #289

jasonmosley21 · 2023-05-02T17:29:45Z

On the RightOnVideo.jsx we have swapped out the current video with the NBC featured video.
We've also moved the WhyRightOn down within the LandingPage.jsx.
Before:

After:

Then we've added a new Supporters.jsx into the LandingPage.jsx with funder logos.
For all the section titles on the Landing Page we reduced the font size and applied a new classname: landing-page-titles

For the Team page, we added new member profiles by adding photos and 3 new blocks in teamData.js
We also added an advisor tab to the carousel by editing the teamData.js and the rotating carousel function in ProfileAdvisors.jsx

We also add more media queries to the App.scss and landingPage.scss to fix the responsive of the header, header logo and footer logo size on the tablet screen.
Before:

After:

adding NBC Video to home page as well as sponser

updated the 4.0 logo and changed the section heading font sizes

update on team member and advisor photos

updated section headings to one singular component as well as fixing the team page to actually display and show Yong Lin's photo

…al-website into coop2023

drewjhart · 2023-05-02T22:07:41Z

public/images/4.0.svg

this is nitpicky but can we rename this file so that it doesn't include a period in the filename itself? 4point.svg or something?

Great point -- 4.0 oftentimes uses 4pt0, so we might go with that

perfect, nice one

drewjhart · 2023-05-02T22:09:14Z

public/images/Schmidt Futures.svg

Similarly, if we are using hyphens between words (like with andy-circle.png) we should probably be consistent throughout the folder. So this would be coming schmidt-futures.svg

just renamed it with the rest of the logos!

sounds good

drewjhart · 2023-05-02T22:10:11Z

package.json

Did you both need to make these changes to get the environment running? It's probably not a big deal but can you provide some context to explain why each of the versions are changing?

We actually don't know what happened but currently we both have the node-sass: 8.0 version on our local folder.

hmmm, ok sounds good. let's go with these versions then.

src/components/molecules/ProfileAdvisors.jsx

src/landingPage.scss

drewjhart · 2023-05-02T22:12:31Z

src/landingPage.scss

+        height: 100%;
+        z-index: 3;
+  top: 0;
+  left: 0;


nitpick: indent to match line 239

looks way better, thanks

drewjhart · 2023-05-02T22:16:53Z

src/landingPage.scss

-        width: 100%;
-        height: 100%;
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 aspect ratio */


would you mind giving me a bit more info on the padding-bottom property here? I'm wondering how the padding itself impacts the layout and how you arrived at 56.25%

Looks like we're using SASS, so this value can be extracted into a variable and used across the file instead of duplicating the value

I can explain the padding-bottom value. When I switched the video it would get these white borders on the sides, I'm assuming because of the aspect ratio not matching the container, so I ask ChatGPT and it give my this bit of code to fix the issue and that value is based on the aspect ratio of the video. 9/16

huh, learned something new every day. Apparently, iframes don't work like images in terms of scaling. Maybe it's just me but I think including this link: http://alistapart.com/article/creating-intrinsic-ratios-for-video/ would help as a comment (instead of 16:9 aspect ratio) so that other people who see this know where the padding-bottom is coming from.

And Mani's point is a good one. you can define a variable in the scss file like: $video-aspect-ratio: 56.25%; (underneath the imports in the file) and then use it like padding-bottom: $video-aspect-ratio (in .right-on-video-container). See this for reference: https://sass-lang.com/documentation/variables and shoot me a message on slack if you need a hand

Gotcha I did add the variable and placed the link in the file since it does a better job of explaining how that works!

Also Drew here's some screenshots of what problems i was getting with the old code and why I used the padding-bottom tag

totally, I did some testing and got the exact same result but didn't know about the padding-bottom trick. Good to know! I think adding the url will help clarify this if it isn't common knowledge. nice job

src/components/atoms/RightOnVideo.jsx

src/components/atoms/Logos.jsx

maniramezan

Nice job on the first PR, this is amazing, especially the new components you've created. I left some minor notes and also:

Checkout markdown on Github for learning better about rich text editing for PR notes and generally anywhere in Github
It's always nice to include a screenshot of the work when your changes is adding a new UI component or changing the existing behavior. You can even attach a video to your PRs

maniramezan · 2023-05-02T22:27:23Z

src/teamPage.scss

@@ -33,6 +33,9 @@
    letter-spacing: 0em;
    text-align: center;
    color: white;
+    justify-items: center;
+    display: grid;
+


nit: extra line, you can also remove the other extra line that was here as well

@cindyqquach @jasonmosley21 do you mind double checking that you've resolved Mani's formatting comments? Thanks!

Yes I think we got all of them!

maniramezan · 2023-05-02T22:27:50Z

src/teamPage.scss

@@ -41,6 +44,8 @@
    border: 3.5px solid #E29B5D;
    opacity: 1;
    justify-content: center;
+    align-items: center;
+


nit: extra line, usually there shouldn't be an extra line before }

maniramezan · 2023-05-02T22:33:38Z

src/landingPage.scss

-        width: 100%;
-        height: 100%;
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 aspect ratio */


Looks like we're using SASS, so this value can be extracted into a variable and used across the file instead of duplicating the value

maniramezan · 2023-05-02T22:34:25Z

src/landingPage.scss

@@ -103,6 +128,12 @@
        margin-left: 15px;
    }

+    .supporters{
+        display: flex;
+


nit: extra line here and generally all over this file

I went through the file and tried to remove any extra lines!

maniramezan · 2023-05-02T22:35:46Z

src/components/organisms/WhyRightOn.jsx

        </Grid>
            <RightOnVideo/>
+        <Grid item sm={12} style={{ zIndex:2 }}>
+          <SectionHeading title="Why RightOn"style={{ zIndex:2 }}/>


Should there be a question mark in the title?

There was supposed to me an exclamation mark which has been fixed!

maniramezan · 2023-05-02T22:39:00Z

src/components/atoms/Logos.jsx

+  <Grid item style={{ height: '130px' }}>
+    <div style={{height: '130px'}} className='supporters'>
+    <img
+      src={featureImage}
+      alt="right-on-education-product-features"
+      style={{ marginLeft: "60px", marginRight: "60px" }}
+      justifyContent="center" alignItems="center"
+
+    />


nit: Indent

maniramezan · 2023-05-02T22:40:42Z

src/components/organisms/Supporters.jsx

+          {supporters.map((logos, key) => {
+            return (
+              <Grid item>
+                <Logos key={key} logos={logos} />


I might be missing something here, but what's this component for? Is this for showing the logo for each supporter? Can one support have multiple logos? Or is it just one logo?

Each supporter has just one logo. I used this component to handle organizing the logos.

Hmmm, I think we can probably simplify this. I think in terms of layout we have a title ("With Support From") and then a grid containing the logos of the sponsors. We are using both Box and Grid mui components as containers.

The mui Grid component is nice because it handles reorienting multiple components in a grid layout (particularly across different sized devices). So I think we only want to use it when we have multiple items in our container. We also can get all the functionality we need out of it with just one Grid container and a series of Grid items. In other cases we can just use Box as a generic mui container.

If we follow this logic, we can actually just hoist the img from Logos and put it into this component, removing the other grid items in that component. So I think we would end up with this:

Suggested change

<Logos key={key} logos={logos} />

function Supporters(props) {

const { supporters } = props

return (

<Box component="section">

<Box justifyContent="center" alignItems="center" >

<SectionHeading title="With support from" />

</Box>

<Grid container justifyContent="center" alignItems="center" spacing={5} >

{supporters.map((logo) => (

<Grid item>

<img

src={logo.featureImage}

alt="right-on-education-product-features"

style={{

height: '130px',

width: '350px',

marginLeft: "60px",

marginRight: "60px"

}}

/>

</Grid>

))}

</Grid>

</Box>

);

}

(note that the above suggestion replaces everything from lines 11 - 40 in the original Supporters.jsx and allows Logos.jsx to be deleted.

@cindyqquach maybe give this a shot and see what you think

I update the code and it works fine, I just had to adjust the height and width a little. Should be good now!

Sorry @jasonmosley21, got confused on who was working on what here. Thanks for addressing this.

maniramezan · 2023-05-02T22:41:02Z

src/components/organisms/Supporters.jsx

+        <Grid
+          item
+          container
+          spacing={5}
+          justify="center"
+          className="why-cards-section"
+        >
+          {supporters.map((logos, key) => {
+            return (
+              <Grid item>
+                <Logos key={key} logos={logos} />
+              </Grid>
+            );
+          })}
+        </Grid>


nit: Indent

src/components/molecules/ProfileAdvisors.jsx

maniramezan · 2023-05-02T22:47:03Z

src/components/atoms/SingleWhy.jsx

+      src={topBackground}
+      className='why-section-top-background'
+      // width="100%"
+      alt="math-background"
+    />


nit: Indent

…al-website into coop2023

updated the NSF logo, and fix issues with the video component responsiveness. background texture is a work in progress

added width to the logos to center them and also adding some margin to the grid to increase spacing from the footer

…al-website into coop2023

for the table view I made the line height smaller. and added spacing between the text and underline.

drewjhart · 2023-05-05T01:23:36Z

Nice job on the first PR, this is amazing, especially the new components you've created. I left some minor notes and also:

Checkout markdown on Github for learning better about rich text editing for PR notes and generally anywhere in Github

It's always nice to include a screenshot of the work when your changes is adding a new UI component or changing the existing behavior. You can even attach a video to your PRs

@cindyqquach @jasonmosley21 Appreciate that you both added some descriptions to the PR - that helps a lot in understanding the changes. Would you also be able to add some screenshots to the description per Mani's comment above? Feel like it makes it a ton easier to understand what the PR is about.

updates the frame around the logos to have less space, updated the right-on-video-container comments to help other understand the values, and updating indentation and removing spaces

updated the code to be a little more simplified. with that i had to adjust the logos again to be more aligned.

…al-website into coop2023

the section heading was behind the background

jasonmosley21 and others added 8 commits May 1, 2023 12:54

Home Page update

2855e85

adding NBC Video to home page as well as sponser

changing sizes and logos

eecd342

updated the 4.0 logo and changed the section heading font sizes

🚧

a43a32c

update on team member and advisor photos

cleans up features.js formatting. adds demo prop to SectionHeading.jsx

7433ce2

fixed team page

a497e5f

updated section headings to one singular component as well as fixing the team page to actually display and show Yong Lin's photo

update on team members & advisor pic

a2a58da

Merge branch 'coop2023' of https://github.com/rightoneducation/offici…

d539369

…al-website into coop2023

refine on photos

cc483eb

jasonmosley21 marked this pull request as ready for review May 2, 2023 20:01

cindyqquach requested a review from drewjhart May 2, 2023 21:36

removes package-lock.json from repo files

0a6089d

drewjhart requested changes May 2, 2023

View reviewed changes

maniramezan reviewed May 2, 2023

View reviewed changes

cindyqquach and others added 10 commits May 3, 2023 16:07

update team member profiles and animation speed

5c3b634

Merge branch 'coop2023' of https://github.com/rightoneducation/offici…

a283b84

…al-website into coop2023

Update to Home Page

560121e

updated the NSF logo, and fix issues with the video component responsiveness. background texture is a work in progress

fix indents and rename logo files

1db72d1

Updates to indentation

db789ef

fix the background img

01e8ade

Centered logos and adjusted spacing

6cc9241

added width to the logos to center them and also adding some margin to the grid to increase spacing from the footer

Update landingPage.scss

400aef6

Merge branch 'coop2023' of https://github.com/rightoneducation/offici…

99a7191

…al-website into coop2023

Adjusted Headings and underline

5917778

for the table view I made the line height smaller. and added spacing between the text and underline.

jasonmosley21 and others added 6 commits May 5, 2023 11:02

update to logos, video comments, and formatting

7d255ec

updates the frame around the logos to have less space, updated the right-on-video-container comments to help other understand the values, and updating indentation and removing spaces

Updates the supporters.jsx

eec1749

updated the code to be a little more simplified. with that i had to adjust the logos again to be more aligned.

fixed responsive header, footer on tablet

26baca2

Merge branch 'coop2023' of https://github.com/rightoneducation/offici…

fd7b7b2

…al-website into coop2023

clean up space

4a39eeb

fixed an positioning issue

ddf54ea

the section heading was behind the background

formatting

3be8056

drewjhart approved these changes May 8, 2023

View reviewed changes

cindyqquach merged commit 9268276 into main May 8, 2023

-                <Logos key={key} logos={logos} />
+function Supporters(props) {
+  const { supporters } = props
+  return (
+    <Box component="section">
+        <Box justifyContent="center" alignItems="center" >
+          <SectionHeading title="With support from" />
+        </Box>
+        <Grid container justifyContent="center" alignItems="center" spacing={5} >
+          {supporters.map((logo) => (
+            <Grid item>
+              <img
+                src={logo.featureImage}
+                alt="right-on-education-product-features"
+                style={{
+                  height: '130px',
+                  width: '350px',
+                  marginLeft: "60px",
+                  marginRight: "60px"
+                }}
+              />
+            </Grid>
+          ))}
+        </Grid>
+    </Box>
+  );
+}

[Website] - Changes to the Landing Page & Team Page #289

[Website] - Changes to the Landing Page & Team Page #289

Conversation

jasonmosley21 commented May 2, 2023 • edited by cindyqquach Loading

For the Team page, we added new member profiles by adding photos and 3 new blocks in teamData.js We also added an advisor tab to the carousel by editing the teamData.js and the rotating carousel function in ProfileAdvisors.jsx

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maniramezan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewjhart May 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewjhart May 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drewjhart commented May 5, 2023

jasonmosley21 commented May 2, 2023 •

edited by cindyqquach

Loading

For the Team page, we added new member profiles by adding photos and 3 new blocks in teamData.js
We also added an advisor tab to the carousel by editing the teamData.js and the rotating carousel function in ProfileAdvisors.jsx

drewjhart May 5, 2023 •

edited

Loading

drewjhart May 8, 2023 •

edited

Loading